<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 300px;
            height: 300px;
            margin: 5px;
            color: #000;
            text-align: left;
            padding: 10px;
        /* 边框 */

            border:1px solid red ;


        }

        .box2{
            width: 300px;
            height: 300px;
            margin: 5px;
            color: #fff;
            text-align: left;
            background-color: blue;
            /* border-top: 5px solid red;
            border-bottom: 5px dashed red; */
            border-width: 10px;
            /* 可以设置多个值 */
            border-color: #000 #888 #00f #f00;
            /* 可以设置多个颜色 */
            border-style: double solid dashed dotted;
            /* 可以设置多个样式 */


            
        /* 边框

        1px 粗细
        solid 样式  实线  double 双实线 dashed 虚线 园虚线 dotted
        red颜色

        单值
        boder-width
        boder-style
        border-color

        */
        }




        /* padding 内边距 
         一个值四个方向 
         两个值 上下 左右 
         三个值 上 左右 下
         四个值 上 右 下 左

         单一方向 
         */


        /* 背景色蔓延到边框 */

    </style>

</head>

<body>

    <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga beatae sequi sit, veniam alias cum, facilis
        pariatur quibusdam laboriosam aspernatur quisquam itaque distinctio rerum nihil eos deleniti earum iure
        repellendus.</div>


        <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam natus vitae beatae odit explicabo, quaerat unde optio delectus animi voluptates totam aut facere illum excepturi fugit assumenda corporis iure perspiciatis.</div>
        <div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam natus vitae beatae odit explicabo, quaerat unde optio delectus animi voluptates totam aut facere illum excepturi fugit assumenda corporis iure perspiciatis.</div>
        
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>333</li>
    </ul>

</body>

</html>